<template>
  <el-container>
    <el-main>
      <el-card class="box-card" shadow="hover">
        <div class="cardcons">
          <div class="leftcons">
            <el-avatar :size="50" :src="require('@/assets/images/api.png')"></el-avatar>
            <div class="fonts">
              <div class="title">参数设置</div>
              <div class="tips">平台参数设置</div>
            </div>
          </div>
          <el-button v-auth="'system-config-edit'" round type="primary" @click="baseConfigShow">配置</el-button>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div class="cardcons">
          <div class="leftcons">
            <el-avatar :size="50" :src="require('@/assets/images/api.png')"></el-avatar>
            <div class="fonts">
              <div class="title">薪资设置</div>
              <div class="tips">机构、教练薪资设置</div>
            </div>
          </div>
          <el-button v-auth="'system-config-edit'" round type="primary" @click="salaryShow">配置</el-button>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div class="cardcons">
          <div class="leftcons">
            <el-avatar :size="50" :src="require('@/assets/images/api.png')"></el-avatar>
            <div class="fonts">
              <div class="title">协议配置</div>
              <div class="tips">平台协议配置</div>
            </div>
          </div>
          <el-button v-auth="'system-config-edit'" round type="primary" @click="agreeshow('service_agreement')">配置
          </el-button>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div class="cardcons">
          <div class="leftcons">
            <el-avatar :size="50" :src="require('@/assets/images/api.png')"></el-avatar>
            <div class="fonts">
              <div class="title">分佣设置</div>
              <div class="tips">机构分佣设置</div>
            </div>
          </div>
          <el-button v-auth="'system-config-edit'" round type="primary" @click="brokerageConfigShow">配置</el-button>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div class="cardcons">
          <div class="leftcons">
            <el-avatar :size="50" :src="require('@/assets/images/api.png')"></el-avatar>
            <div class="fonts">
              <div class="title">课程金额设置</div>
              <div class="tips">课时价格设置</div>
            </div>
          </div>
          <el-button v-auth="'system-config-edit'" round type="primary" @click="experienceConfigShow">配置</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>

  <salary-config v-if="dialog.salary" ref="salaryConfig" @closed="dialog.salary=false"
                 @success="handleSuccess"></salary-config>

  <recommend-code v-if="dialog.recommendCode" ref="recommendCode" @closed="dialog.recommendCode=false"
                  @success="handleSuccess"></recommend-code>

  <agree-dialog v-if="dialog.agree" ref="agreeDialog" @closed="dialog.agree=false"
                @success="handleSuccess"></agree-dialog>

  <base-config v-if="dialog.baseConfig" ref="baseConfig" @closed="dialog.baseConfig=false"
               @success="handleSuccess"></base-config>

  <experience-config v-if="dialog.experienceConfig" ref="experienceConfig" @closed="dialog.experienceConfig=false"
                     @success="handleSuccess"></experience-config>
  <brokerage-config v-if="dialog.brokerageConfig" ref="brokerageConfig" @closed="dialog.brokerageConfig=false"
                    @success="handleSuccess"></brokerage-config>

</template>

<script>
import salaryConfig from './components/salaryConfig.vue'
import recommendCode from './components/recommendCode.vue'
import agreeDialog from './components/agreement.vue'
import baseConfig from './components/baseConfig.vue'
import brokerageConfig from './components/brokerageConfig.vue'
import experienceConfig from './components/experienceConfig.vue'

export default {
  components: {
    salaryConfig,
    recommendCode,
    agreeDialog,
    baseConfig,
    brokerageConfig,
    experienceConfig,
  },
  data() {
    return {
      dialog: {
        salary: false,
        recommendCode: false,
        agree: false,
        baseConfig: false,
        brokerageConfig: false,
      }
    }
  },
  methods: {
    //查看参数配置
    async salaryShow() {
      let arr = [
        'base_salary',
        'trial_course',
        'class_hour_30',
        'class_hour_60',
        'teacher_base_level',
        'teacher_middle_level',
        'teacher_senior_level',
        'forget_salary'
      ]
      this.dialog.salary = true
      await this.$API.system.config.get({key: arr}).then(res => {
        if (res.error === 0) {
          this.$nextTick(() => {
            this.$refs.salaryConfig.open().setData(res.data)
          })
        }
      }, () => {
        this.dialog.salary = false
      })
    },
    async recommendCodeShow() {
      let arr = [
        'recommend_code_ratio',
      ]
      this.dialog.recommendCode = true
      await this.$API.system.config.get({key: arr}).then(res => {
        if (res.error === 0) {
          this.$nextTick(() => {
            this.$refs.recommendCode.open().setData(res.data)
          })
        }
      }, () => {
        this.dialog.recommendCode = false
      })
    },
    async agreeshow(value) {
      this.dialog.agree = true
      this.$nextTick(() => {
        this.$refs.agreeDialog.open().setData(value)
      })
    },
    async baseConfigShow() {
      let arr = [
        'course_remind_hour',
        'delay_end_time',
        'recharge_times',
        'applet_share_image',
        'wechat_applet_qrcode',
        'partner_min_number'
      ]
      this.dialog.baseConfig = true
      await this.$API.system.config.get({key: arr}).then(res => {
        if (res.error === 0) {
          this.$nextTick(() => {
            this.$refs.baseConfig.open().setData(res.data)
          })
        }
      }, () => {
        this.dialog.baseConfig = false
      })
    },
    async brokerageConfigShow() {
      let arr = [
        'fist_level_amount',
        'second_level_amount',
      ]
      this.dialog.brokerageConfig = true
      await this.$API.system.config.get({key: arr}).then(res => {
        if (res.error === 0) {
          this.$nextTick(() => {
            this.$refs.brokerageConfig.open().setData(res.data)
          })
        }
      }, () => {
        this.dialog.brokerageConfig = false
      })
    },
    async experienceConfigShow() {
      let arr = [
        'price_thirty',
        'price_sixty',
      ]
      this.dialog.experienceConfig = true
      await this.$API.system.config.get({key: arr}).then(res => {
        if (res.error === 0) {
          this.$nextTick(() => {
            this.$refs.experienceConfig.open().setData(res.data)
          })
        }
      }, () => {
        this.dialog.experienceConfig = false
      })
    },
    handleSuccess() {
    }
  }
}
</script>

<style lang="scss" scoped>
.cardcons {
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: space-between;
}

.cardcons .leftcons {
  display: flex;
  align-items: center;
}

.cardcons .title {
  font-size: 15px;
  margin-bottom: 6px;
}

.cardcons .fonts {
  margin-left: 20px;
}

.box-card {
  margin-bottom: 15px;
}
</style>
